@charset "utf-8";
@import "variable";

html, body {
  height: 100%;
  overflow: hidden!important;
}

body {
  display: flex;
  flex-direction: column;
}

#container {
  flex: 1;
  display: flex;
  padding: 15px;
  font-size: 0.28rem;
  color: #fff;
  background: $main-bg;
  /* 左右两侧 */
  .body {
    display: flex;
    flex-direction: column;
    padding: 0.3rem;
    background-color: $main-body-bg;
    border: 1px solid #000;
  }
  /* 左侧 */
  .left {
    width: 70%;
    margin-right: 15px;
    /* 左边上半部分 */
    .top {
      display: flex;
      .total {
        flex: 1;
        margin-right: 0.3rem;
        .align-center {
          display: inline-block;
          text-align: left;
          img {
            margin-top: -3px;
          }
        }
      }
      /* 医院数量 */
      .hospital-count {
        p {
          line-height: 0.84rem;
          white-space: nowrap;
        }
        .level-count {
          display: inline-block;
          width: 0.44rem;
          height: 0.44rem;
          line-height: 0.44rem;
          color: #000;
          font-weight: bold;
          background-color: #f9d48e;
          border-radius: 0.08rem;
          text-align: center;
          margin-right: 0.1rem;
        }
        p:nth-child(2) .level-count {
          background-color: #eca389;
        }
        p:nth-child(3) .level-count {
          background-color: #e8ffec;
        }
        p:nth-child(4) .level-count {
          background-color: #61dddb;
        }
      }
      .load-rate {
        >h3, >div {
          padding: 0 0.3rem;
        }
      }
      .assets {
        text-align: center;
      }
      .person-times {
        text-align: center;
      }
    }
    /* 下半部分 */
    .bottom {
      flex: 1;
      display: flex;
      #hospital-distribution {
        flex: 1;
        margin-top: 0.3rem;
        height: 100%;
      }
    }
  }
  /* 右侧 */
  .right {
    display: flex;
    flex-direction: column;
    width: 30%;

    .top {
      .hospital-map {
        .header-title {
          line-height: 0.32rem;
          span {
            display: inline-block;
            margin-right: 0.4rem;
            vertical-align: middle;
          }
          span:before {
            content: 'a';
            display: inline-block;
            margin-right: 0.10rem;
            height: 0.32rem;
            width: 0.12rem;
            color: #fff;
            border-radius: 0.06rem;
            background-color: #fff;
            overflow: hidden;
            vertical-align: middle;
          }
          span:nth-child(2):before {
            color: #f19a29;
            background-color: #f19a29;
          }
          span:nth-child(3):before {
            color: #21c4e9;
            background-color: #21c4e9;
          }
          span:nth-child(4):before {
            color: #fe842d;
            background-color: #fe842d;
          }
        }
      }
    }

    .bottom {
      flex: 1;
      overflow: hidden;
      p:nth-child(1) {
        color: #fcad25;
      }
      p:nth-child(2) {
        color: #b8e14d;
      }
      p:nth-child(3) {
        color: #26d48f;
      }
      span {
        display: inline-block;
        font-size: 0.32rem;
        line-height: 0.88rem;
      }
      .name {
        width: 33%;
      }
      .value {
        width: 31%;
        text-align: right;
      }
    }
  }
  /* 上半部分 */
  .top {
    border-bottom: 1px dashed #7b7e87;
  }

  /* 公共样式 */
  .title {
    font-size: 0.36rem;
    font-weight: bold;
    line-height: 0.96rem;
  }
  .more {
    font-size: 0.28rem;
    color: #e9b035;
    cursor: pointer;
    text-decoration: underline;
  }
  .more:link {
    color: #e9b035;
    text-decoration: underline;
  }
  .more:visited {
    color: #e9b035;
    text-decoration: underline;
  }
  .more:hover {
    color: #e9b035;
    text-decoration: underline;
  }
  .more:active {
    color: #e9b035;
    text-decoration: underline;
  }
}

/* 模态框 */
.iziModal {
  padding-top: 1.4rem;
  height: 100%;
  box-sizing: border-box;
  color: #fff;
  background-color: transparent;

  .iziModal-content {
    overflow: auto;
    background-color: #222431;
  }
  table {
    width: 100%;
    min-width: 100%;
    line-height: 2;
    border-collapse: collapse;

    tr:nth-of-type(odd) td, tr:nth-of-type(odd) th{
      background-color: #1d2029;
    }
    tr:nth-of-type(even) td, tr:nth-of-type(even) th {
      background-color: #222431;
    }
    th {
      color: #15b997;
      padding: 0 0.1rem;
      font-weight: bold;
      white-space: nowrap;
    }
    td {
      padding-right: 0.3rem;
      white-space: nowrap;
    }
    thead th {
      cursor: pointer;
      background: url(../../plugins/charts/images/white-point.png) repeat-x 0 100%;

      img {
        width: 0.6rem;
        height: 0.4rem;
      }
    }
    tfoot td {
      color: #15b997;
      background: url(../../plugins/charts/images/white-point.png) repeat-x 0 0;
    }
    .spanTitle {
      color: #15b997;
      text-decoration: underline;
      cursor: pointer;
    }
    .border-bottom {
      border-bottom: 1px solid #666;
    }
  }

  .iziModal-button.export_excel {
    right: 78px;
    margin: 6px;
    width: 22px;
    height: 22px;
    text-align: center;
    font-size: 16px;
    color: #222431;
    background-color: #fff;
  }
}::-webkit-scrollbar {
   width: 0.16rem;
   height: 0.16rem;
 }